<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        function ajax(options){
            //存储的是默认值
            var defaults = {
                type:'get',
                url:'',
                data:{},
                header:{
                    'Content-Type':'application/x-www-form-urlencoded'
                },
                success:function(){},
                error:function(){}
            };
            Object.assign(defaults,options);
            //创建ajax对象
            var xhr = new XMLHttpRequest();
            //拼接请求参数的变量
            var params = '';
            //循环用户传递过来的对象格式参数
            for(var attr in defaults.data){
                //将参数转换为字符串格式
                params += attr+'='+defaults.data[attr]+'&';
            }
            params = params.substr(0,params.length-1);
            //判断请求方式
            if(defaults.type == 'get'){
                defaults.url = defaults.url + '?' +params;
            }
            //配置ajax对象
            xhr.open(defaults.type,defaults.url);
            //如果请求方式为post
            if(defaults.type == 'post'){
                //用户希望的向服务器传递的请求参数的类型
                var contentType = defaults.header['Content-Type'];
                //设置请求参数格式的类型
                xhr.setRequestHeader('Content-Type',contentType);
                //判断用户希望的请求参数格式的类型
                //如果类型为json
                if(contentType == 'application/json'){
                    //向服务器传递json数据格式的参数
                    xhr.send(JSON.stringify(defaults.data));
                }else{
                    //向服务器传递普通类型的请求参数
                    xhr.send(params);
                }
               
            }else{
                xhr.send();
            }
            //监听xhr对象下面的onload事件
            //当xhr对象接收完响应数据后触发
            xhr.onload = function(){
                //xhr.getResponseHeader()
                //获取响应头中的数据
                var contentType = xhr.getResponseHeader('Content-Type');
                var responseText = xhr.responseText;
                //如果响应类型中包含application/json
                if(contentType.includes('application/json')){
                    responseText = JSON.parse(responseText);
                }
                //当http状态码等于200的时候
                if(xhr.status == 200){
                    //请求成功调用处理成功情况的函数
                    defaults.success(responseText,xhr);
                }else{
                    //请求失败，调用处理失败的函数
                    defaults.error(responseText,xhr);
                }
               
            }
        }
        ajax({
            //请求地址
            url:'http://localhost:3000/responseData',
            data:{
                name:'zhangsan',
                age:20
            },

            success:function(data,xhr){
                console.log(data);
   
            }

        });
    </script>
</body>
</html>